<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            border: 2px solid #000;
        }
    </style>
</head>
<body>
    <div id="box">123</div>
    <button class="addBg">添加背景色</button>
    <button class="addColor">添加字体颜色</button>
    <button class="moveBox">移动Box</button>
    <script>
        // 目标：DOM操作(节点操作)
        // 第1步：获取节点
        var box = document.getElementById('box');//直接返回的是节点对象
        var addBg = document.getElementsByClassName('addBg');//返回的是类数组
        var addColor = document.getElementsByClassName('addColor');
        var moveBox = document.getElementsByClassName('moveBox')[0];
        
        console.dir(box)

        // 第2步：绑定事件
        addBg[0].onclick = function(){
            // 第3步：编写事件处理函数
            box.style.background = 'red'
            // box.style.backgroundColor = 'red'
        }
        addColor[0].onclick = function(){
            // 第3步：编写事件处理函数
            box.style.color = 'blue'
            box.style.width = '300px'
            box.style.height = '300px'
            box.style.fontSize = '130px'
        }
        moveBox.onclick = function(){
            var left = 0;
            setInterval(function(){
                left+=2
                box.style.marginLeft = left+'px'
            },50)
        }
    </script>
</body>
</html>